@R04       : 0.4rem;
@R03       : 0.3rem;
@R02       : 0.2rem;
@box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);

//导航栏
header {
    width          : 100%;
    min-width      : 43rem;
    height         : 2rem;
    position       : sticky;
    position       : -webkit-sticky;
    top            : 0;
    left           : 0;
    z-index        : 99;
    box-shadow     : @box-shadow;
    backdrop-filter: blur(3px);

    #options {
        width     : 43rem;
        height    : 100%;
        position  : relative;
        margin    : 0 auto;
        box-sizing: border-box;

        #logo {
            position      : relative;
            float         : left;
            width         : 6rem;
            height        : 2rem;
            text-align    : center;
            font-size     : 0.9rem;
            font-weight   : 500;
            letter-spacing: 0.04rem;
            line-height   : 2rem;
        }

        #Switchbox {
            position: relative;
            float   : right;
            width   : 2rem;
            height  : 2rem;
        }

        .modeSwitch {
            line-height: 2rem;
            font-size  : 0.9rem;
            position   : relative;
            float      : right;
            width      : 2rem;
            height     : 2rem;
            text-align : center;
            cursor     : pointer;
            opacity    : 0.7;
        }

        .modeSwitch:hover {
            opacity: 1;
        }

        #ApplyBtn {
            position   : relative;
            float      : right;
            width      : 4rem;
            font-size  : 0.7rem;
            height     : 100%;
            text-align : center;
            line-height: 2rem;
            opacity    : 0.7;
            cursor     : pointer;
        }

        #ApplyBtn:hover {
            opacity: 1;
        }

        .ops {
            position      : relative;
            float         : left;
            height        : 2rem;
            padding       : 0;
            margin        : 0;
            text-align    : center;
            display       : flex;
            flex-direction: row;

            a {
                font-size  : 0.7rem;
                font-weight: 400;
                line-height: 2rem;
                height     : 100%;
                padding    : 0 0.75rem;
                opacity    : 0.7;
                float      : left;
                position   : relative;
                cursor     : pointer;

                div {
                    position: absolute;
                    width   : 100%;
                    height  : 0.06rem;
                    bottom  : 0;
                    left    : 0;
                }
            }

            a:hover {
                opacity: 1;
            }
        }
    }
}

//提交表单
#Apply {
    display        : none;
    position       : fixed;
    width          : 100%;
    height         : 100%;
    background     : rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index        : 99;

    #FriendForm {
        width        : 30rem;
        height       : 22rem;
        position     : absolute;
        border-radius: @R04;
        box-shadow   : @box-shadow;
        left         : 50%;
        top          : 50%;
        transform    : translate(-50%, -50%);
        overflow     : hidden;

        .errormsg {
            display  : none;
            cursor   : default;
            font-size: 0.4rem;
            color    : red;
            opacity  : 1;
            position : absolute;
            left     : 50%;
            transform: translateX(-50%);
            bottom   : 2.6rem;
        }

        #confirm {
            width        : 100%;
            height       : 100%;
            position     : absolute;
            top          : 100%;
            z-index      : 99;
            border-radius: @R04;
            box-shadow   : @box-shadow;

            #agreement {
                width     : 100%;
                padding   : 0 1.2rem;
                margin-top: 4.8rem;
                opacity   : 0.7;

                p {
                    font-size    : 0.55rem;
                    margin-bottom: 0.4rem;
                    line-height  : 1rem;
                }
            }

            #msgpreview {
                position     : absolute;
                width        : 95%;
                left         : 50%;
                margin       : 0.8rem 0;
                transform    : translateX(-50%);
                height       : 3rem;
                border-radius: @R04;
                box-shadow   : @box-shadow;
                padding-right: 0.6rem;

                p {
                    position   : absolute;
                    margin-left: 3.5rem;
                }

                img {
                    height       : 2.6rem;
                    width        : 2.6rem;
                    border-radius: @R03;
                    margin       : 0.2rem;
                }

                p#friendid {
                    font-size     : 0.9rem;
                    font-weight   : 500;
                    letter-spacing: 0.04rem;
                    top           : 0.35rem;
                }

                p#friendslogan {
                    font-size     : 0.7rem;
                    letter-spacing: 0.02rem;
                    bottom        : 0.35rem;
                }

                .friendBtn {
                    width      : 3.5rem;
                    height     : 100%;
                    float      : right;
                    padding-top: 0.6rem;

                    a {
                        color        : #fff !important;
                        height       : 1.8rem;
                        display      : inline-block;
                        border-radius: @R03;
                        width        : 100%;
                        text-align   : center;
                        line-height  : 1.8rem;
                        opacity      : 0.7;
                        font-size    : 0.8rem;
                        cursor       : pointer;
                    }

                    a:hover {
                        opacity: 1;
                    }
                }
            }

            #msgcheck {
                font-size  : 0.55rem;
                line-height: 0.57rem;
                left       : 50%;
                transform  : translateX(-50%);
                text-align : center;
                position   : absolute;
                bottom     : 3.5rem;

                #checkclick {
                    position: absolute;
                    z-index : 99;
                    width   : 100%;
                    height  : 100%;
                    cursor  : pointer;
                }

                input,
                p {
                    float : left;
                    cursor: pointer;
                    color : #888;
                }

                input {
                    margin-right: 0.3rem;
                }
            }

            ul {
                position : absolute;
                left     : 50%;
                transform: translateX(-50%);
                bottom   : 1rem;
            }

            li {
                float  : left;
                width  : 5rem;
                padding: 0 0.5rem;
            }

            .confirmBtn {
                height        : 1.5rem;
                display       : inline-block;
                width         : 4rem;
                font-size     : 0.7rem;
                line-height   : 1.5rem;
                text-align    : center;
                letter-spacing: 0.1rem;
                border-radius : 0.75rem;
                opacity       : 0.7;
                color         : #fff !important;
                box-shadow    : @box-shadow;
            }

            #formback {
                cursor: pointer;
            }

            #formconfirm {
                cursor: default;
            }

            #formback:hover {
                opacity: 1;
            }

            #msgconfirm {
                font-size     : 1rem;
                letter-spacing: 0.1rem;
                text-align    : center;
                margin-top    : 0.8rem;
                opacity       : 0.8;
            }
        }

        #closeForm {
            font-size     : 1.4rem;
            transform     : translate(50%, -50%) rotate(45deg);
            position      : absolute;
            right         : 1.2rem;
            top           : 1.2rem;
            cursor        : pointer;
            width         : 1.4rem;
            height        : 1.4rem;
            vertical-align: middle;
            text-align    : center;
            border-radius : 50%;
            opacity       : 0.7;
            z-index       : 99;
        }

        #closeForm:hover {
            font-size: 1.5rem;
            opacity  : 1;
        }

        #switchForm {
            position     : absolute;
            left         : 50%;
            top          : 1rem;
            transform    : translateX(-50%);
            width        : 6rem;
            height       : 1.5rem;
            border-radius: 0.75rem;
            box-sizing   : border-box;
            box-shadow   : @box-shadow;

            a {
                position     : absolute;
                width        : 54%;
                height       : 1.3rem;
                border-radius: 0.65rem;
                font-size    : 0.7rem;
                line-height  : 1.3rem;
                text-align   : center;
                margin       : 0.1rem;
                opacity      : 0.7;
                cursor       : pointer;
            }

            .select {
                color: #FFF !important;
            }

            a:hover {
                opacity: 1;
            }

            a#Add {
                left: 0rem;
            }

            a#Modify {
                right: 0rem;
            }
        }

        #msgwindow {
            position: absolute;
            width   : 100%;
            height  : 87%;
            bottom  : 0;
            overflow: hidden;

            #msgbox {
                position: absolute;
                height  : 100%;
                width   : 200%;
                left    : 0;

                #Addbox,
                #Modifybox {
                    width   : 50%;
                    height  : 100%;
                    float   : left;
                    position: relative;
                    padding : 0 3rem;

                    td {
                        box-sizing: border-box;
                        height    : 1.45rem;
                    }

                    input[type=text],
                    input[type="email"],
                    input[type=password],
                    label {
                        left: 0;
                    }

                    label {
                        font-size     : 0.6rem;
                        opacity       : 0.7;
                        letter-spacing: 0.1rem;
                    }

                    input[type=text],
                    input[type="email"],
                    input[type=password] {
                        border-radius: 0.2rem;
                        height       : 1.4rem;
                        width        : 100%;
                        border       : 1px solid rgba(0, 0, 0, 0.4);
                        padding      : 0 0.3rem;
                    }

                    @placeholder: #AAA;

                    ::-webkit-input-placeholder {
                        color: @placeholder;
                    }

                    :-moz-placeholder {
                        color: @placeholder;
                    }

                    :-ms-input-placeholder {
                        color: @placeholder;
                    }

                    #id {
                        left: 0;
                    }

                    .SubmitBtn {
                        position      : absolute;
                        left          : 50%;
                        transform     : translateX(-50%);
                        bottom        : 1rem;
                        height        : 1.5rem;
                        border-radius : 0.75rem;
                        border        : none;
                        box-shadow    : @box-shadow;
                        width         : 6rem;
                        cursor        : pointer;
                        opacity       : 0.7;
                        color         : #FFF;
                        font-size     : 0.7rem;
                        letter-spacing: 0.1rem;
                    }

                    .SubmitBtn:hover {
                        opacity: 1;
                    }
                }

                //添加表单
                #Addbox {
                    table {
                        width: 100%;

                        td {
                            width  : 50%;
                            padding: 0 1rem;
                        }
                    }
                }

                //修改表单
                #Modifybox {
                    table {
                        width: 100%;

                        tr {
                            position: relative;
                        }

                        td {
                            width   : 25% !important;
                            padding : 0 1rem;
                            position: relative;
                        }
                    }

                    #verifybox {
                        height  : 3.025rem;
                        position: relative;
                    }

                    #verify {
                        position      : absolute;
                        left          : 50%;
                        transform     : translate(-50%, -50%);
                        top           : 60%;
                        height        : 1.5rem;
                        border-radius : 0.75rem;
                        box-shadow    : @box-shadow;
                        width         : 6rem;
                        cursor        : pointer;
                        opacity       : 0.7;
                        background    : #FFF;
                        border        : 0.1rem;
                        font-size     : 0.7rem;
                        letter-spacing: 0.1rem;
                    }

                    #verify:hover {
                        opacity: 1;
                    }
                }
            }
        }
    }
}

//侧边栏
#sidebox {
    float         : right;
    position      : sticky;
    position      : -webkit-sticky;
    top           : 2rem;
    margin-right  : 1rem;
    width         : 8.5rem;
    padding-top   : 1rem;
    display       : flex;
    flex-direction: column;
    order         : 99;

    #love,
    #info,
    #url,
    #controls,
    #notestag {
        width        : 100%;
        border-radius: @R04;
        box-shadow   : @box-shadow;
        position     : relative;
    }

    #love {
        width      : 100%;
        height     : 1.5rem;
        line-height: 1.5rem;
        text-align : center;

        #lovetime {
            font-size     : 0.6rem;
            letter-spacing: 0.02rem;
            opacity       : 0.7;
            font-weight   : 500;
        }
    }

    #info {
        text-align: center;
        padding   : 1rem 0.5rem;
        margin-top: 0.5rem;

        img {
            width        : 6rem;
            height       : 6rem;
            border       : 2px solid #383838;
            border-radius: 50%;
        }

        p#ID,
        p#slogan {
            cursor: default;
        }

        p#ID {
            font-size     : 0.8rem;
            font-weight   : 500;
            letter-spacing: 0.15rem;
        }

        p#slogan {
            font-size     : 0.55rem;
            font-weight   : 400;
            letter-spacing: 0.02rem;
        }
    }

    @ops-w: 6.3rem;

    #url {
        height    : 2rem;
        margin-top: 0.5rem;
        box-sizing: border-box;

        .ops {
            height    : 100%;
            width     : @ops-w;
            font-size : 0.9rem;
            text-align: center;
            position  : absolute;
            left      : 50%;
            transform : translateX(-50%);

            a {
                opacity    : 0.7;
                width      : (@ops-w/3);
                height     : 100%;
                line-height: 2rem;
                position   : absolute;
            }

            a:nth-child(1) {
                left: 0;
            }

            a:nth-child(2) {
                left     : 50%;
                transform: translateX(-50%);
            }

            a:nth-child(3) {
                right: 0;
            }

            a:hover {
                opacity: 1;
            }
        }
    }

    #controls {
        height     : 4rem;
        margin-top : 0.5rem;
        cursor     : default;
        padding-top: 0.5rem;

        .controlsicon {
            opacity: 0.7;
            cursor : pointer;
        }

        .controlsicon:hover {
            opacity: 1;
        }

        #playPrev,
        #playNext {
            margin: 0.42rem 1.5rem;
        }

        #playPrev {
            float: left;
        }

        #playNext {
            float: right;
        }

        #toggle {
            color        : #F6F1EB;
            font-size    : 0.8rem;
            height       : 1.8rem;
            width        : 1.8rem;
            text-align   : center;
            //播放时Icon偏移
            padding      : 0.04rem 0 0 0.1rem;
            //暂停时Icon偏移
            //padding: 0.04rem 0 0 0.02rem;
            line-height  : 1.8rem;
            border-radius: 50%;
            position     : absolute;
            left         : 50%;
            transform    : translateX(-50%);
        }

        #volumeSet {
            position: absolute;
            width   : 100%;
            height  : 1.2rem;
            bottom  : 0;

            .volumeIcon,
            #volumeRange {
                position: absolute;
                top     : 50%;
                opacity : 0.7;
                cursor  : pointer;
            }

            .volumeIcon:hover,
            #volumeRange:hover {
                opacity: 1;
            }

            .volumeIcon {
                font-size: 0.8rem;
                transform: translateY(-50%);
            }

            #volumeMin {
                left: 0.5rem;
            }

            #volumeMax {
                right: 0.5rem;
            }

            #volumeRange {
                left     : 50%;
                width    : 5rem;
                transform: translate(-50%, -50%) scaleX(-1);
            }

            @RH: 0.35rem;

            //滑块样式
            input[type=range] {
                appearance        : none;
                -webkit-appearance: none;
                -moz-appearance   : none;
                border-radius     : (@RH/2);
                height            : @RH;
                background-size   : 50% 100%;
            }

            input[type=range]:focus {
                outline: none;
            }

            //适配FireFox
            input[type=range]::-moz-range-track {
                height       : @RH;
                border-radius: (@RH/2); //将轨道设为圆角的
                border       : 1px solid #B2B2B2;
            }

            input[type=range]::-moz-range-progress {
                height       : @RH;
                border-radius: (@RH/2);

            }

            input[type=range]::-moz-range-thumb {
                appearance        : none;
                -webkit-appearance: none;
                height            : 15px;
                width             : 15px;
                margin-top        : 3px;
                background        : #ffffff;
                border-radius     : 50%; //外观设置为圆形
                border            : 1px solid #B2B2B2;
                background        : #F6F1EB;
            }

            //适配webkit内核
            input[type=range]::-webkit-slider-runnable-track {
                height       : @RH;
                border-radius: (@RH/2); //将轨道设为圆角的
                border       : 1px solid #B2B2B2;
            }

            input[type=range]::-webkit-slider-thumb {
                appearance        : none;
                -webkit-appearance: none;
                height            : 15px;
                width             : 15px;
                transform         : translateY(-50%);
                margin-top        : 3px;
                background        : #ffffff;
                border-radius     : 50%; //外观设置为圆形
                border            : 1px solid #B2B2B2;
                background        : #F6F1EB;
            }
        }
    }

    #notestag {
        display       : flex;
        flex-direction: column;
        margin-top    : 0.5rem;
        padding       : 0 0 0.25rem 0.25rem;
        display       : flex;
        flex-flow     : row wrap;

        a.notetag {
            margin       : 0.25rem 0.25rem 0 0;
            opacity      : 0.7;
            border-radius: @R02;
            padding      : 0 0.25rem;
            font-size    : 0.6rem;
            color        : #FFF;
            cursor       : pointer;
        }

        a.notetag:hover {
            opacity: 1;
        }
    }
}

//Footer
footer {
    position   : absolute;
    bottom     : 0;
    width      : 100%;
    height     : 1.5rem;
    min-width  : 43rem;
    line-height: 1.5rem;
    text-align : center;
    margin-top : 1rem;
    padding    : 0 1rem;

    a,
    p {
        font-size: 0.5rem;
        position : relative;
    }

    img {
        float : left;
        cursor: pointer;
    }

    a,
    .record,
    .record p,
    .version {
        float      : left;
        line-height: 1.5rem;
    }

    img {
        position   : relative;
        width      : 0.6rem;
        margin     : 0.38rem 0.06rem 0 0;
        line-height: 1.5rem;
    }

    .space {
        margin: 0 0.3rem;
        cursor: default;
    }

    //引导页备案信息居中
    #indexrecord {
        position       : absolute;
        left           : 50%;
        transform      : translateX(-50%);
        display        : flex;
        justify-content: center;
    }
}